<template>
  <div class="userslogin">
    <van-nav-bar title="用户登录"></van-nav-bar>
    <div class="container">
      <div class="input-container">
        <input
          type="text"
          placeholder="用户名/邮箱/已验证手机"
          v-model="Form.username"
        />
      </div>
      <div class="input-container">
        <input
          type="password"
          placeholder="请输入密码"
          v-model="Form.password"
        />
      </div>
      <div
        class="login btn_class"
        :class="{ active: isBtnActive }"
        @click="handleLogin"
      >
        登录
      </div>
      <div class="register btn_class" @click="handleToRegister">注册</div>
      <div class="quick-login">
        <span class="forget-psd"
          ><div @click="handleToForgetpwd">忘记密码</div></span
        >
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { login } from "@/api/api";
import { MY_SELF } from '@/router/router';
import activeMixin from 'util/mixins/activeMixin'
import jwtDecode from 'jwt-decode'
export default {
  name: "UsersLogin",
  mixins: [activeMixin],
  data() {
    return {
      Form: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    handleToRegister() {
      this.$emit('update:loginOrRegister', 'register');
    },
    handleToForgetpwd() {
      this.$emit('update:loginOrRegister', 'forgetpwd');
    },
    handleLogin() {
      if(this.isBtnActive){
        login(this.Form).then(res => {
          console.log(res);
          localStorage.setItem('token', res.token);
          // eslint-disable-next-line no-undef
          socket.emit('login', jwtDecode(localStorage.getItem("token")).id);
          this.$router.replace(MY_SELF);
        }).catch(err => {
          console.log(err);
        });
      }
      // if (!rule.test(this.Form.username)) {
      //   this.$notify('用户名格式错误');
      //   return;
      // }
      // if (!(this.Form.password.length >= 6 && this.Form.password.length <= 20)) {
      //   this.$notify('密码格式错误');
      //   return;
      // }

    }
  },
  components: {}
};
</script>

<style scoped lang="stylus">
a
  color #A9A9A9

.userslogin
  width 90%
  margin 0 auto
  background #ffffff

  .container
    height 100%
    width 100%
    overflow hidden
    margin-top 30px

    .quick-login
      margin-top 20px
      overflow hidden
      width 100%
      font-size 14px

      .forget-psd
        float right

    .btn_class
      width 100%
      border-radius 25px
      height 40px
      line-height 40px
      font-size 16px
      font-family PingFangSC-Semibold
      text-align center

    .login
      color #ffffff
      background-image linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba)
      margin-bottom 15px

    .register
      color #f10000
      background-color #ffffff
      border 1px solid #f10000
      box-sizing border-box

    .input-container
      height 40px
      border-bottom 1px solid #efefef

      &:nth-child(1), &:nth-child(2)
        margin-bottom 20px

    .input-container input[type="text"]
      width 100%
      font-size 15px
      color #222222

    .input-container input[type="password"]
      width 100%
      font-size 15px
      color #222222
</style>
